<template>
  <div :class="type == 'head'?'top-metric-head':'top-metric-card'" :style="customStyle">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "TopMetricCard",
  props: {
    customStyle: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: "head"
    }
  }
};
</script>

<style scoped>
.top-metric-card,
.top-metric-head {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(
    135deg,
    rgba(30, 41, 59, 0.95),
    rgba(26, 32, 44, 0.95)
  );
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}
.top-metric-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #4f46e5, #10b981);
}
.top-metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #4f46e5, #10b981);
  animation: shimmer 2s infinite;
}
.top-metric-head:hover,
.top-metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(59, 130, 246, 0.4);
  background: linear-gradient(
    135deg,
    rgba(30, 41, 59, 0.98),
    rgba(26, 32, 44, 0.98)
  );
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
</style>